<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>理车堂</title>
    <!-- basic styles -->
    <link th:href="@{/images/logo.ico}" rel="shortcut icon" />
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/assets/css/font-awesome.min.css}"/>

    <!--[if IE 7]>
    <link rel="stylesheet" th:href="@{assets/css/font-awesome-ie7.min.css}"/>
    <![endif]-->

    <!-- inline styles related to this page -->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
    <script th:src="@{/assets/js/html5shiv.js}"></script>
    <script th:src="@{/assets/js/respond.min.js}"></script>
    <![endif]-->

    <link rel="stylesheet" th:href="@{/css/login.css}"/>

    <style>
        .verify-code{
            padding-left: 0;
        }
        .verify-code img{
           height: 34px;
        }
        .btn:focus{
            outline: none;
        }
    </style>

</head>

<body class="login-layout">
    <div class="main-container">
        <form id="formLogin" class="" role="form" th:attr="action=${isAjaxRequest==null || isAjaxRequest?'':'/login'}" method="post">
            <div class="form-group">
                <input type="text" class="form-control " name="username" autocomplete="off" placeholder="账号"/>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" name="password" autocomplete="off" placeholder="密码"/>
            </div>
            <div class="form-group" th:if="${param.error}">
                <div class="row">
                    <div class="col-lg-5 col-xs-5 col-sm-5 col-md-5 container-fluid">
                        <input type="text" class="form-control" name="verifyCode" autocomplete="off" placeholder="验证码"/>
                    </div>
                    <div class="col-lg-7 col-xs-7 col-sm-7 col-md-7 container-fluid verify-code ">
                        <a class="eb-pointer" onclick="changeVerifyCode();" ><img id="verifyCode" alt="." th:src="@{/verifyCode}" >看不清</a>
                    </div>
                </div>
            </div>
            <div th:if="${param.error}" class="form-group bg-danger error">
                <img th:src="@{images/warning.svg}">
                <span th:if="!${session.errcode}">你输入的密码和账户名不匹配，是否<a th:href="@{/resetPassword}">忘记密码</a></span>
                <span th:if="${session.errcode}" th:text="${session?.SPRING_SECURITY_LAST_EXCEPTION?.message}"></span>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block submit-btn-v2" th:classappend="${isAjaxRequest==null || isAjaxRequest?'login-submit':''}" >
                    登&nbsp;&nbsp;&nbsp;&nbsp;录
                </button>
            </div>
            <div class="session-timeout bg-danger error ng-cloak" ></div>
            <div class="form-group">
                <div class="pull-left"><label><input name="remember-me" type="checkbox" checked> 记住我</label></div>
                <div class="pull-right"><a th:href="@{/resetPassword}">忘记密码？</a><span class="splitter"></span>&nbsp;<span class="register"><a th:href="@{/register}">注册</a></span></div>
            </div>
        </form>
    </div>
<script type="text/javascript">
    function changeVerifyCode() {
        var img = document.getElementById("verifyCode");
//直接设置src不会更新，因为这个地址与以前的地址一样。
        var d = new Date();//生成一个随机值 - 或是使用Math.random
        var url = '/verifyCode?t=' + d.getTime();//每一次都是一个新的时间
        img.src = url;
    };

</script>
</body>
</html>
